<script setup lang="ts">
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const router = useRouter()
const route = useRoute()
const user_id = route.query.uid

const userStore = useUserStore()
const { id, username, nickname, gender, avatar, rating } = storeToRefs(userStore)

onMounted(async () => {
    if (id.value !== user_id) {
        message.error('无法访问')
        router.push({ name: 'noauth' })
        return
    }
    // 验证id是否存在
})
const activeKey = ref('1')
import { routes } from './components/routes'
import { message } from 'ant-design-vue'

const items = routes.map((item, index) => {
    return {
        key: index,
        name: item.name,
        title: item.meta.title,
        label: item.meta.title,
    }
})
const handleClick = (item: any) => {
    router.push({ name: item.name, query: { uid: user_id } })
}
</script>

<template>
    <a-layout id="container">
        <a-layout-sider width="200" class="bg-white">
            <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="返回"
                @back="() => $router.push({ name: 'index' })" />
            <a-menu :items="items" :selectedKeys="[activeKey]"
                @select="({ key, item }) => { activeKey = key; handleClick(item) }">
            </a-menu>
        </a-layout-sider>
        <a-layout-content class="p-5 bg-white">
            <RouterView />
        </a-layout-content>
    </a-layout>
</template>

<style scoped>
:deep(.ant-page-header){
    padding: 0;
    padding-left: 1.25rem;
}
#container{
    height: 100vh;
}
</style>
